/**
* 左边菜单
*/ 
<template>
  <el-menu default-active="2" :collapse="collapsed" collapse-transition router unique-opened
    class="el-menu-vertical-demo" background-color="#3d3d3d" text-color="#fff" active-text-color="#3d3d3d">
    <div class="logobox">
      <img class="logoimg" src="../assets/img/logo.png" alt="">
    </div>
    <el-menu-item class="icon">
      <i class="li-icon-xiangmuguanli"></i>
      <span>sasdada</span>
    </el-menu-item>
    <el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname" class="test">

      <template slot="title">
        <i class="iconfont" :class="menu.icon"></i>
        <span>{{ menu.menuname }}</span>
      </template>

      <el-submenu v-for="chmenu in menu.menus" :key="chmenu.menuid" :index="chmenu.menuname">

        <template slot="title">
          <i class="iconfont" :class="chmenu.icon"></i>
          <span>{{ chmenu.menuname }}</span>
        </template>


        
          <el-menu-item v-for="cchmenu in chmenu.menus" :key="cchmenu.menuid" :index="'/'+cchmenu.url">
            <i class="iconfont" :class="cchmenu.icon"></i>
            <span>{{ cchmenu.menuname }}</span>
          </el-menu-item>

        

      </el-submenu>
    </el-submenu>
  </el-menu>
</template>
<script>

export default {
  name: 'leftnav',
  data() {
    return {
      collapsed: false,
      allmenu: []
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    // 获取图形验证码
    let res = {
      success: true,
      data: [
        {
          menuid: 1,
          icon: 'li-icon-xiangmuguanli',
          menuname: '系统首页',
          hasThird: null,
          url: null,
        },
        {
          menuid: 33,
          icon: 'li-icon-dingdanguanli',
          menuname: '人事管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 34,
              icon: 'icon-order-manage',
              menuname: '员工参数',
              hasThird: null,
              url: null,
              menus: [
                {
                  menuid: 35,
                  icon: 'icon-order-manage',
                  menuname: '民族',
                  hasThird: 'N',
                  url: 'test',
                  menus: null
                },
                {
                  menuid: 36,
                  icon: 'icon-order-manage',
                  menuname: '入职信息',
                  hasThird: 'N',
                  url: 'person',
                  menus: null
                }
              ]
            }
          ]
        },
        {
          menuid: 71,
          icon: 'li-icon-xitongguanli',
          menuname: '系统管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 72,
              icon: 'icon-cus-manage',
              menuname: '用户管理',
              hasThird: 'N',
              url: 'system/user',
              menus: null
            },
            {
              menuid: 174,
              icon: 'icon-cms-manage',
              menuname: '菜单管理',
              hasThird: 'N',
              url: 'system/Module',
              menus: null
            },
            {
              menuid: 73,
              icon: 'icon-news-manage',
              menuname: '角色管理',
              hasThird: 'N',
              url: 'system/Role',
              menus: null
            },
            {
              menuid: 74,
              icon: 'icon-cs-manage',
              menuname: '公司管理',
              hasThird: 'N',
              url: 'system/Dept',
              menus: null
            },
            {
              menuid: 75,
              icon: 'icon-promotion-manage',
              menuname: '系统环境变量',
              hasThird: 'N',
              url: 'system/Variable',
              menus: null
            },
            {
              menuid: 76,
              icon: 'icon-cms-manage',
              menuname: '权限管理',
              hasThird: 'N',
              url: 'system/Permission',
              menus: null
            }
          ]
        },
        {
          menuid: 128,
          icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
          menuname: '支付管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 129,
              icon: 'icon-provider-manage',
              menuname: '支付配置信息',
              hasThird: 'N',
              url: 'machine/MachineConfig',
              menus: null
            },
            {
              menuid: 175,
              icon: 'icon-provider-manage',
              menuname: '支付配置',
              hasThird: 'N',
              url: 'pay/Config',
              menus: null
            }
          ]
        },
        {
          menuid: 150,
          icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
          menuname: '图表',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 159,
              icon: 'icon-provider-manage',
              menuname: '数据可视化',
              hasThird: 'N',
              url: 'charts/statistics',
              menus: null
            }
          ]
        }
      ],
      msg: 'success'
    }
    this.allmenu = res.data

    
    // 监听
    this.$root.Bus.$on('toggle', value => {
      this.collapsed = !value
    })
  }
}
</script>
<style>
.icon {
  font-size: large;
  font-weight: bold;

  color: #800f0f
}

.test:hover {
  color: #5d5da5
}

.test {
  font-size: large;
  font-weight: bold;

  color: #800f0f
}

.menuWarpper {
  background-color: #ff0000 !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  background-color: #3d3d3d !important;
  width: 240px;
  min-height: 400px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}

.el-menu-item-group__title {
  background-color: #3d3d3d !important;
  padding: 0px;
}

.el-menu-bg {
  background-color: #ff0000 !important;
}

.el-menu {
  border: none;

}

.logobox {

  background-color: #3d3d3d !important;
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}

.logoimg {
  background-color: #3d3d3d !important;
  height: 40px;
}
</style>